<template>
	<div id="app">
		<drawer :show="drawerShow" :placement="placement" :showMode="showMode" @update:show="changeDrawerShow" @on-hide="onHide" @on-show="onShow">
			<div class="layout" slot="drawer">
				<span>{{ pageTitle.Comname }}</span>
				<ul class="nav">
					<li v-for="item in navlist"><router-link :to="item.link" :title="item.title">{{ item.title }}</router-link></li>
				</ul>
			</div>

			<div class="header">
				<div class="logo">
					<a href="/"><img :src="apiurl+pageTitle.logo"></a>
					<p>{{ pageTitle.Comname }}</p>
					<p>{{ pageTitle.subName }}</p>
				</div>
				<div class="icon">
					<x-icon type="navicon" v-on:click="drawerToggle" class="icon-nav" size="40"></x-icon>
				</div>
			</div>

			<transition :name="name">
				<keep-alive>
				<router-view class="child-view"></router-view>
				</keep-alive>
			</transition>
	
			<div class="footer">
				<p v-html="copyRight"></p>
			</div>
		</drawer>
	</div>
</template>

<script>

	import { Drawer } from 'vux'
	export default {
		data() {
			return {
				placement: 'left',
				showMode: 'push',
				drawerShow: false,
				name: 'slide-left', // 默认动态路由变化为slide-right
				pageTitle: {
					logo : require('./assets/logo.png'),
					Comname : '',
					subName : '',
				},
				navlist : [

				],
				copyRight: ''
			}
		},
		methods: {
			drawerToggle() {
				this.drawerShow = !this.drawerShow
			},
			onHide() {
				let wrap = this.$el.firstChild.firstChild;
				if(this.placement == 'left') {
					wrap.classList.remove('actives');
				} else if(this.placement == 'right') {
					wrap.classList.remove('activer');
				}
			},
			changeDrawerShow(state) {
				this.drawerShow = state;
			},
			onShow() {
				let wrap = this.$el.firstChild.firstChild;
				if(this.placement == 'left') {
					wrap.classList.add('actives');
				} else if(this.placement == 'right') {
					wrap.classList.add('activer');
				}
			}
		},
		watch: { 				//监听路由切换
			$route() {
				this.drawerShow = false;
				this.ajax;
			}
		},
		computed: {
			ajax (){
				let _this = this;

				this.$ajax.get(this.apiurl+'?c=plugin&pluginid=wxapp_menu&wxapp_skin='+this.wxapp_skin)
				.then(function (res) {
					_this.navlist = res.data.data;
					_this.copyRight = res.data.data2.content;
					_this.$store.dispatch('updateCar',res.data.data3);
					_this.pageTitle.Comname = res.data.sys.sitename;
					_this.pageTitle.subName = res.data.sys.seotitle;
					_this.pageTitle.logo = res.data.sys.mobi_logo;
				})
				.catch(function (error) {
					console.log(error);
				});
			}
		},
		components: {
			Drawer
		},
		mounted (){
			this.ajax;
		}
	}
</script>

<style>
	body,a,p,li,ul,h1,h2,h3,h4,h5,strong,div {
		font-size: 0.13rem;
		font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
		margin: 0;
		padding: 0;
		border: none;
		text-decoration: none;
		line-height: 1.5;
		color: rgb(0, 38, 101);
	}
	ul,li {
		list-style: none;
	}
	#app {
		height: 100%;
	}
	body {
		height: 100%;overflow-x: hidden !important; max-width: 640px; margin: 0 auto;background: url('./assets/about_bg.jpg') center center repeat-y; background-size:100% 100%;
	}
	html {
		height: 100%;
	}
	.nav {
		position: absolute;
		z-index: 99;
		top: 0.62rem;
		left: 0;
		width: 100%;
	}
	.nav a {
		display: block;
		height: 0.42rem;
		border-bottom: 0.01rem solid #fff;
		line-height: 0.42rem;
		padding-left: 0.2rem;
		color:#fff;
	}
	.nav .router-link-exact-active {
		color: #fff;
		background: #0541a5;
	}
	.layout {
		width: 2.3rem;
		padding-top: 0.1rem;
		overflow: hidden;
	}
	.layout span {
		font-size: 0.14rem;
		display: block;
		color:#fff;
		text-align: center;
		line-height: 0.5rem;
	}
	.vux-drawer .actives {
		-webkit-transform: translate3d(2.3rem, 0px, 0px) !important;
		transform: translate3d(2.3rem, 0px, 0px) !important;
	}
	.vux-drawer .activer {
		-webkit-transform: translate3d(-2.3rem, 0px, 0px) !important;
		transform: translate3d(-2.3rem, 0px, 0px) !important;
	}
	.vux-drawer>.vux-drawer-content {
		background: #002665 !important;
	}
	.header {
		height: 0.65rem;
		overflow: hidden;
		width: 100%;
		color: rgb(0, 38, 101);
		background: #eee;
	}
	.header p {
		font-size: 0.14rem;
		font-weight: bold;
		margin-top: 0.02rem;
	}
	.header .logo {
		float: left;
		width: 82%;
		padding: 0.1rem 0 0 0.12rem;
		margin-bottom: 0.12rem;
	}
	.header .logo strong {
		width: 0.44rem;
		height: 0.44rem;
		font-size: 0.15rem;
		float: left;
		margin-right: 0.1rem;
		margin-top: 0.12rem;
	}
	.header .logo img {
		width: 0.44rem;
		height: 0.44rem;
		font-size: 0.15rem;
		float: left;
		margin-right: 0.1rem;
	}
	.header .icon {
		float: left;
		width: 0.4rem;
		height: 0.4rem;
		border-radius:50%;
		margin-top: 0.14rem;
		background: #076ee5;
	}
	.header .icon svg {
		fill: #fff;
		margin: 0.05rem 0;
		width: 0.4rem;
		height: 0.4rem;
		cursor: pointer;
		height: 0.3rem;
	}
	.footer{
		padding:.1rem;
		background: #ddd;
		width:100%;
		text-align: center;
	}
	.footer p{
		line-height: 0.24rem;
	}
	.title {
		text-align: center;
		margin: 0.22rem 0;
		clear: both;
	}
	.title strong{
		font-size: 0.18rem;
		font-weight: bold;
		color:rgb(0, 38, 101);
	}
	.title p {
		color:rgb(0, 38, 101);
		line-height: 0.22rem;
		font-size: 0.12rem;
	}
   .tab{margin: .15rem auto .2rem; overflow: hidden; width:80%;}
   .tab.tabs{display: -webkit-flex;display: -o-flex;display: -ms-flex; display: flex; -webkit-justify-content: center; -o-justify-content: center; -ms-justify-content: center; justify-content: center;}
   .tab a{display: block; width:31%; height: .32rem; background: #999; line-height: .32rem; text-align: center; color: #fff; float: left; margin-right: 2%; margin-bottom:2%; border-radius: .02rem;}
	
	/* 路由切换动画 */
	.child-view {
		width: 100%;
		-webkit-transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
		transition: all .5s cubic-bezier(.55, 0, .1, 1);
	}
	.slide-right-enter-active,
	.slide-right-leave-active,
	.slide-left-enter-active,
	.slide-left-leave-active {
		will-change: transform;
		transition: all 0.5s;
		height: 100%;
		position: absolute;
		backface-visibility: hidden;
		perspective: 1000;
	}
	.slide-right-enter {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
	.slide-right-leave-active {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	.slide-left-enter {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	.slide-left-leave-active {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
</style>